<template>
  <el-dialog
    :visible.sync="dialogVisible"
    class="tenementEdit"
    title="商场信息维护"
    width="50%"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form ref="tenementForm" :model="dataInfo" :rules="rules" label-width="6rem">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item label="租户编码:" prop="tenantCode">
            <el-input v-model="dataInfo.tenantCode" :disabled="disabled" placeholder="租户编码" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="租户类型:" prop="tenantType">
            <el-select v-model="dataInfo.tenantType" :disabled="disabled">
              <el-option value="0">线上线下</el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="经营类目:" prop="businessCategory">
            <el-select v-model="dataInfo.businessCategory" :disabled="disabled">
              <el-option value="0">日用百货</el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="租户简称:" prop="tenantAbbreviation">
            <el-input v-model="dataInfo.tenantAbbreviation" :disabled="disabled" placeholder="租户简称" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="租户全称:" prop="tenantName">
            <el-input v-model="dataInfo.tenantName" :disabled="disabled" placeholder="租户全称" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="主体公司:" prop="subjectCompany">
            <el-input v-model="dataInfo.subjectCompany" :disabled="disabled" placeholder="主体公司" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属集团:" prop="group">
            <el-input v-model="dataInfo.group" :disabled="disabled" placeholder="所属集团" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="经营地址:" prop="addr">
            <el-input v-model="dataInfo.addr" :disabled="disabled" placeholder="经营地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所在地区:" prop="location">
            <el-cascader ref="address" v-model="dataInfo.location" :disabled="disabled" class="w400" placeholder="选择所在地区" :options="addrList" :props="treeProps" filterable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="联系人:" prop="contacts">
            <el-input v-model="dataInfo.contacts" :disabled="disabled" placeholder="联系人" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="联系电话:" prop="tel">
            <el-input v-model="dataInfo.tel" :disabled="disabled" placeholder="联系电话" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="账户期限:" prop="accountDate">
            <el-date-picker
              v-model="dataInfo.accountDate"
              :disabled="disabled"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态:" prop="status">
            <el-select v-model="dataInfo.status" :disabled="disabled">
              <el-option value="0">有效</el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="租户介绍:" prop="remark">
            <el-input v-model="dataInfo.remark" :disabled="disabled" type="textarea" :rows="2" placeholder="请输入内容" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-card shadow="never">
        <div slot="header" class="clearfix">
          <span>主体信息:</span>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="企业信息" name="0">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="企业名称:" prop="name">
                  <el-input v-model="dataInfo.name" :disabled="disabled" placeholder="请填写企业名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="注册地址:" prop="registerAddr">
                  <el-input v-model="dataInfo.registerAddr" :disabled="disabled" placeholder="请填写注册地址" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="信用证代码:" prop="letterOfCreditCode">
                  <el-input v-model="dataInfo.letterOfCreditCode" :disabled="disabled" placeholder="请填写信用证代码" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="营业期限:" prop="businessTerm">
                  <el-input v-model="dataInfo.businessTerm" :disabled="disabled" placeholder="请填写营业期限" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="经营范围:" prop="natureOfBusiness">
                  <el-input v-model="dataInfo.natureOfBusiness" :disabled="disabled" type="textarea" :rows="2" placeholder="请输入内容" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40" class="tenementImgItem">
              <el-col :span="24">
                <el-form-item label="营业执照:" prop="pics">
                  <el-upload
                    ref="uploadImg"
                    list-type="picture-card"
                    name="fileInput"
                    :disabled="disabled"
                    :file-list="dataInfo.fileList"
                    :data="fileData"
                    :before-upload="beforeUpload"
                    :headers="headers"
                    :on-success="handleSuccess"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :auto-upload="true"
                  >
                    <i slot="default" class="el-icon-plus" />
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file,'1')">
                          <i class="el-icon-zoom-in" />
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file,'1')">
                          <i class="el-icon-download" />
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file,'1')">
                          <i class="el-icon-delete" />
                        </span>
                      </span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="法人信息" name="1">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="名称:" prop="name">
                  <el-input v-model="dataInfo.name" :disabled="disabled" placeholder="请填写法人名称" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别:" prop="sex">
                  <el-select v-model="dataInfo.sex" :disabled="disabled">
                    <el-option value="0">男</el-option>
                    <el-option value="1">女</el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="身份证号:" prop="idCard">
                  <el-input v-model="dataInfo.idCard" :disabled="disabled" placeholder="请填写身份证号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话:" prop="tel">
                  <el-input v-model="dataInfo.tel" :disabled="disabled" placeholder="请填写电话" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="身份证地址:" prop="addr">
                  <el-input v-model="dataInfo.addr" :disabled="disabled" placeholder="请填写身份证号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="出身年月:" prop="birthday">
                  <el-date-picker
                    v-model="dataInfo.birthday"
                    :disabled="disabled"
                    type="date"
                    placeholder="选择日期"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40" class="tenementImgItem">
              <el-col :span="24">
                <el-form-item label="身份证照:" prop="pics">
                  <el-upload
                    ref="idCardUpload"
                    :disabled="disabled"
                    list-type="picture-card"
                    name="fileInput"
                    :file-list="dataInfo.fileList"
                    :data="fileData"
                    :before-upload="idCardBeforeUpload"
                    :headers="headers"
                    :on-success="idCardHandleSuccess"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :auto-upload="true"
                  >
                    <i slot="default" class="el-icon-plus" />
                    <div slot="file" slot-scope="{file}">
                      <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                      <span class="el-upload-list__item-actions">
                        <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file,'2')">
                          <i class="el-icon-zoom-in" />
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file,'2')">
                          <i class="el-icon-download" />
                        </span>
                        <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file,'2')">
                          <i class="el-icon-delete" />
                        </span>
                      </span>
                    </div>
                  </el-upload>
                  <!-- <el-dialog :close-on-click-modal="false" :visible.sync="imgDialogVisible" :modal-append-to-body="false">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog> -->
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-form>
    <span v-if="!disabled" slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary">确 定</el-button>
    </span>
    <el-dialog :close-on-click-modal="false" :visible.sync="imgDialogVisible" :modal="false">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </el-dialog>
</template>

<script>
export default {
  props: {
    parentId: {
      type: String,
      required: false,
      default: ''
    },
    disabled: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      activeName: '0',
      addrList: [],
      treeProps: {
        label: 'name',
        value: 'code'
      },
      dialogImageUrl: '',
      imgDialogVisible: false, // 图片modal 开关
      dialogVisible: false, // 编辑页开关
      dataInfo: {},
      headers: {
        authorization: '111111'
      },
      fileData: {
        parentId: '222',
        addressType: '2'
      },
      rules: {
        tenantCode: [{
          required: true,
          message: '请填写租户编码',
          trigger: 'blur'
        }],
        tenantType: [{
          required: true,
          message: '请选择租户类型',
          trigger: 'blur'
        }],
        businessCategory: [{
          required: true,
          message: '请选择经营类目',
          trigger: 'blur'
        }],
        tenantAbbreviation: [{
          required: true,
          message: '请输入租户简称',
          trigger: 'blur'
        }],
        tenantName: [{
          required: true,
          message: '请输入租户全称',
          trigger: 'blur'
        }],
        subjectCompany: [{
          required: true,
          message: '请输入主体公司',
          trigger: 'blur'
        }],
        group: [{
          required: true,
          message: '请输入所属集团',
          trigger: 'blur'
        }],
        addr: [{
          required: true,
          message: '请输入经营地址',
          trigger: 'blur'
        }],
        location: [{
          required: true,
          message: '请选择所在地区',
          trigger: 'blur'
        }],
        contacts: [{
          required: true,
          message: '请填写联系人',
          trigger: 'blur'
        }],
        tel: [{
          required: true,
          message: '请填写联系电话',
          trigger: 'blur'
        }],
        accountDate: [{
          required: true,
          message: '请填写账户期限',
          trigger: 'blur'
        }],
        status: [{
          required: true,
          message: '请选择状态',
          trigger: 'blur'
        }],
        remark: [{
          required: true,
          message: '请填写租户介绍',
          trigger: 'blur'
        }],
        name: [{
          required: true,
          message: '请填写企业名称',
          trigger: 'blur'
        }],
        registerAddr: [{
          required: true,
          message: '请填写注册地址',
          trigger: 'blur'
        }],
        letterOfCreditCode: [{
          required: true,
          message: '请填写信用证代码',
          trigger: 'blur'
        }],
        businessTerm: [{
          required: true,
          message: '请填写营业期限',
          trigger: 'blur'
        }],
        natureOfBusiness: [{
          required: true,
          message: '请填写经营范围',
          trigger: 'blur'
        }],
        pics: [{
          required: true,
          message: '营业执照不能为空',
          trigger: 'blur'
        }],
        birthday: [{
          required: true,
          message: '出生年月不能为空',
          trigger: 'blur'
        }],
        idCard: [{
          required: true,
          message: '请填写身份证号',
          trigger: 'blur'
        }],
        sex: [{
          required: true,
          message: '请选择性别',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    // modal关闭事件
    handleClose() {
      this.dialogVisible = false
    },
    // tabs 切换事件
    handleClick() {
      console.log('222')
    },
    beforeUpload(file) {},
    idCardBeforeUpload(file) {},
    handleSuccess(file) {},
    idCardHandleSuccess(file) {},
    handleRemove(file, type) {},
    handleDownload(file, type) {
      console.log(file)
    },
    // 图片放大
    handlePictureCardPreview(file, type) {
      this.dialogImageUrl = file.url
      this.imgDialogVisible = true
    }
  }
}
</script>

<style lang="scss">
.tenementEdit {
  .el-select,.el-cascader {
    width: 100%
  }
  .tenementImgItem {
    >div {
      display: flex;
      align-items: center;
    }
  }
}
</style>
